import { MovieCard } from "./MovieCard";

interface MovieListProps {
    title: string;
    data: Record<string, any>[]
}

export const MovieList = ({ title, data }: MovieListProps) => {
    console.log(data)

    if (data?.length === 0) return null
    return (<>
        <div className="px-4 md:px-12 mt-4 space-x-8">
            <div>
                <p className="text-white text-md md:text-xl mb-3 lg:text-2xl font-semibold">
                    {title}
                </p>
                <div className="grid grid-cols-4 gap-2  gap-y-2">
                    {
                        data?.map((movie) => (
                            // <div key={movie.id}>{movie.id}</div>
                            <MovieCard key={movie.id} data={movie} />
                        ))
                    }
                </div>
            </div>
        </div>
    </>)
}